<template>
    <div>
        <el-dialog v-model="localVisible" title="添加销售出库" @close="closeAddDialog" width="60%" @open="openAddDialog">
            <!-- 表单数据 -->
            <el-form :model="form" label-width="110px" ref="formRef" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="出库单名称" prop="salseName">
                            <el-input v-model="form.salseName" placeholder="请输入出库单名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="销售订单编号" prop="soCode">
                            <el-input v-model="form.soCode" placeholder="请输入销售订单编号"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="客户编码" prop="clientCode">
                            <el-input v-model="form.clientCode" placeholder="请选择客户">
                                <template #append>
                                    <el-button type="primary" :icon="Search" @click="selectClient"></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户名称" prop="clientName">
                            <el-input v-model="form.clientName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出库日期" prop="salseDate">
                            <el-date-picker v-model="form.salseDate" type="datetime" placeholder="请选择出库日期" clearable
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.remark" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="closeAddDialog">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <CustomerSelectionDialog :CustomerDialog="CustomerDialog" @close-dialog="closeCustomer" @rowDataA="getCustomer">
        </CustomerSelectionDialog>

    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue'
import CustomerSelectionDialog from '../CustomerOrders/CustomerSelectionDialog.vue';
import { saveProductSalse } from '@/apis/index.js'
import { ElMessage } from 'element-plus'
const props = defineProps({
    addDialogVisible: Boolean
})
const CustomerDialog = ref(false) //客户选择框
// 定义表单数据
const form = ref({
    salseName: null,
    soCode: null,
    clientId: null,
    clientCode: null,
    clientName: null,
    salseDate: null,
    remark: null
});

// 定义表单实例
const formRef = ref(null);
//定义验证规则
const rules = {
    salseName: [
        { required: true, message: '请输入出库单名称', trigger: 'blur' }
    ],
    soCode: [
        { required: true, message: '请输入销售订单编号', trigger: 'blur' }
    ],
    clientCode: [
        { required: true, message: '请选择客户', trigger: 'blur' }
    ],
    clientName:[{
        required: true, message: '请输入客户名称', trigger: 'blur'
    }],
    salseDate: [
        { required: true, message: '请选择出库日期', trigger: 'blur' }
    ]
}

// 创建本地状态来跟踪对话框的可见性
const localVisible = ref(props.addDialogVisible);

// 监听父组件传递的prop变化，并同步到本地状态
watch(() => props.addDialogVisible, (newValue) => {
    localVisible.value = newValue;
});

const emit = defineEmits(['update:addDialogVisible'])
const closeAddDialog = () => {
    localVisible.value = false;
    emit('update:addDialogVisible', false)
}
//打开客户选择框
const selectClient = () => {
    CustomerDialog.value = true
}
//关闭客户选择框
const closeCustomer = () => {
    CustomerDialog.value = false
}
//获取到选择的客户信息
const getCustomer = (row) => {
    const { customerId, customerName, customerCode } = { ...row }
    form.value.clientId = customerId
    form.value.clientName = customerName
    form.value.clientCode = customerCode
}
// 保存销售出库单
const save = async () => {
    formRef.value.validate(async valid=>{
        if(valid){
            await saveProductSalse(form.value)
            closeAddDialog()
            ElMessage.success('保存成功')
        }else{
            ElMessage.error('表单填写不正确，请检查')
        }
    })
}
const openAddDialog = ()=>{
    form.value = {}
    // 清除表单验证规则
    formRef.value.clearValidate()
}

</script>

<style scoped></style>
